<template>
	<div>
		<div class="e-m-t-45 flex" style="justify-content: space-between">
			<div class="u-flex-1">
				<el-button @click="downloadwithdrawa()" style="margin-bottom:30px; margin-top: 1px;" type="primary" plain><i class="iconfont icon-excel"></i>导出Excel</el-button>
				<el-button type="primary" icon="el-icon-plus" plain @click="create">新建移库单</el-button>
			</div>
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item label="关键词搜索">
					<el-input placeholder="用户昵称、订单号、小哥昵称、站点" v-model="key" prefix-icon="el-icon-search"></el-input>
				</el-form-item>
				<!-- <el-form-item label="订单类型">
					<el-select v-model="ordertype" clearable placeholder="请选择" @change="getList">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="站点筛选">
					<el-select v-model="Storeid" clearable placeholder="请选择" @change="getList(true)">
						<el-option v-for="item in StoreList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="下单时间">
					<el-date-picker :clearable="false" @change="time" value-format="yyyy-MM-dd" v-model="value1"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getList(true)">查询</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div class="type-state e-m-b-30">
			<span v-for="(item, index) in statusArr" :key="index" :class="{ 'on': orderState == item.value }"
				@click="orderState = item.value">{{ item.name }}</span>
		</div>

		<!-- 自定义表格 -->
		<custom-table
			:table-data="tableData"
			:columns="tableColumns"
			:actions="tableActions"
			:total="total"
			:page-index="pageIndex"
			:page-size="pageSize"
			@page-change="handlePagination"
			@action-click="handleTableAction"
		>
			<!-- 自定义状态 -->
			<template #state="scope">
				<span class="color-success" v-if="scope.row.state == '已完结'">{{scope.row.state}}</span>
				<span class="color-warning" v-else-if="scope.row.state == '已出库'">{{scope.row.state}}</span>
				<span class="color-danger" v-else>{{scope.row.state}}</span>
			</template>
		</custom-table>

		<!-- 取消理由 -->
		<el-dialog title="取消订单" :visible.sync="showcancel" width="30%">
			<el-input type="textarea" :rows="5" placeholder="请输入取消订单的理由" v-model="textarea" maxlength="200">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showcancel = false">取消</el-button>
				<el-button type="primary" @click="cancelOrderSubmit">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
// import FormList from "";
export default {
	data() {
		return {
			// 自定义列表字段控制参数
			tablefield: {
				number: true,
				brother: true,
				weight: true,
				total: true,
				amount: true,
				name: true,
				store: true,
				order: true,
				createddatetime: true,
				orderState: true,
			},
			timeType: 0,//时间类型
			ordertype: 0,
			options: [
				{
					value: 0,
					label: '全部'
				},
				{
					value: 1,
					label: '小哥入库单'
				},
				{
					value: 2,
					label: '客户组入库单'
				},
				{
					value: 3,
					label: '用户入库单'
				},
				{
					value: 4,
					label: '线下入库单'
				}
			],
			value1: "",//下单时间
			starteate: "",//下单初始
			endDate: "",//下单结束
			loading: true,
			key: '',
			pageIndex: 1,
			pageSize: 10,
			total: 0,
			tableData: [],
			tableColumns: [
				{ 
					prop: 'number', 
					label: '订单编号',
					width: 'auto'
				},
				{ 
					prop: 'brother', 
					label: '运输小哥', 
					formatter:(row)=>{
						if(row.brother){
							return row.brother.name
						}
					},
					width: 200
				},
				{ 
					prop: 'store', 
					label: '移库至', 
					formatter:(row)=>{
						if(row.store){
							return row.store.name
						}
					},
					width: 200
				},
				{ 
					prop: 'createddatetime', 
					label: '建单时间', 
					width: 180
				},
				{ 
					prop: 'remarks', 
					label: '备注', 
					formatter:(row)=>{
						row.remarks || '--'
					},
				},
				{ 
					prop: 'state', 
					label: '订单状态',
					slotName: 'state', 
				},
			],
			tableActions: [
				{ 
					name: 'view', 
					label: '查看'
				}
			],
			statusArr: [
                {
                    name: '全部',
                    value: null
                },
                {
                    name: '已装车',
                    value: 1
                },
                {
                    name: '已出库',
                    value: 2
                },
                {
                    name: '已完结',
                    value: 3
                },
                {
                    name: '已取消',
                    value: 4
                }
			],
			orderState: null,
			// 
			nowid: 0,
			textarea: "",
			showcancel: false,
			StoreList: '',
			Storeid: "",
			param:{}
		}
	},
	watch: {
		orderState(value) {
			this.pageIndex = 1
			this.getList()
		}
	},
	mounted() {
		for(let k in this.$route.query){
			if(this.$route.query[k]){
				if(k == 'pageIndex' || k == 'pageSize' || k == 'Storeid'){
					this[k] = parseInt(this.$route.query[k])
				}else if(k == 'startDate' || k == 'endDate'){
					this[k] = this.$route.query[k]
					this.value1 = [this.$route.query['startDate'],this.$route.query['endDate']]
					this.timeType = 4
				}else{
					this[k] = this.$route.query[k]
				}
			}
		}
		this.getList()
		this.getstorelist()
	},
	methods: {
		// 翻页操作处理
		handlePagination({ pageIndex, pageSize }) {
			this.pageIndex = pageIndex
			this.pageSize = pageSize
			this.getList(false) // 获取新数据
		},
		// 操作按钮点击事件
		handleTableAction({ action, row, event }) {
			switch(action) {
				case 'view':
					this.goView(row.id)
				break
			}
		},
		getstorelist() {
			this.$axios.post('/Select/StoreList', {
				"pageIndex": 1,
				"pageSize": 999,
			}).then((res) => {
				console.log(res)
				this.StoreList = res.rows
				this.StoreList.unshift({ id: "", name: '全部' })
			}).catch((err) => {
				this.loading = false
			})
		},
		downloadwithdrawa() {
			this.$axios.post('/Store/OutOrder/Download', {
				"request": {
					"pageIndex": this.pageIndex,
					"pageSize": 0,
					"offset": 0,
					"key": "",
					"timeType": 1,
					"startDate": this.startDate,
					"endDate": this.endDate,
					"OrderState": this.orderState,
					"packStationId": 0,
					"OrderType": this.ordertype,
					"timeType": this.timeType
				},
				"fields": [
					{
						"e": "Number",
						"c": "订单编号"
					},
					{
						"e": "",
						"c": "订单类型"
					},
					{
						"e": "User.Name",
						"c": "客户"
					},
					{
						"e": "OrderDetails.Weight",
						"c": "重量"
					},
					{
						"e": "OrderDetails.Total",
						"c": "件数"
					},
					{
						"e": "OrderDetails.Amount",
						"c": "金额"
					},
					{
						"e": "Store.name",
						"c": "站点"
					},
					{
						"e": "CreatedDateTime",
						"c": "订单时间"
					},
					{
						"e": "",
						"c": "派送小哥"
					},
					// {
					// 	"e": "ManageState",
					// 	"c": "管理状态"
					// }
				]

			}, {
				responseType: 'blob'
			}).then(res => {
				console.log(res)
				let content = res;
				let fileName = '入库订单.xls'
				this.utils.saveAndExport(content, fileName)
			})
		},
		time(e) {
			if(e && e.length > 0){
				this.startDate = e[0]
				this.endDate = e[1]
				this.timeType = 4
				this.getList()
			}else{
				this.timeType = 0
				this.startDate = ''
				this.endDate = ''
				this.getList()
			}
		},
		create() {
			this.$router.push({
				path: '/order/move/create'
			})
		},
		getList(renew) {
			if(renew == true){
				this.pageIndex = 1
			}
			this.tableData = []
			this.loading = true
			this.param = {
				"pageIndex": this.pageIndex,
				"pageSize": this.pageSize,
				"key": this.key,
				"orderState": this.orderState,
				"startDate": this.startDate,
				"endDate": this.endDate,
				"orderType": this.ordertype,
				"timeType": this.timeType,
				"Storeid": this.Storeid
			}
			return this.$axios.post('/Store/MoveOrder/List', this.param).then((res) => {
				this.loading = false
				this.tableData = res.rows;
				this.total = res.total;
			}).catch((err) => {
				this.loading = false
			})
		},
		goView(id) {
			let param = []
			for(let k in this.param){
				if(this.param[k]){
					param.push(`${k}=${this.param[k]}`)
				}
			}
			this.$router.push(`/order/move/list?${param.join('&')}`)

			return '/order/move/Views?id=' + id
		},
		pageChange(e) { // 页码切换事件
			this.pageIndex = e;
			this.getList(false)
			// this.$router.push(`/order/move/list?p=${this.pageIndex}`)
		},
		handleSizeChange(val) {
			this.pageIndex = 1;
			this.pageSize = val;
			this.getList()
		},
		del(id) {
			return new Promise((resolve, reject) => {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// this.$axios.post('/newsDetail/delete?Ids=' + id).then((res) => {
					// 	this.$message.success(res.msg);
					// 	this.getList()
					// 	resolve()
					// })
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			})
		},
		cancelOrder(id) {
			this.showcancel = true;
			this.nowid = id;
		},
		cancelOrderSubmit() {
			this.$axios.post('/Admin/Store/MoveOrder/Cancel', {
				id: this.nowid,
				reason: this.textarea,
			}).then((res) => {
				this.$message({
					type: 'success',
					message: res.msg
				});
				this.showcancel = false;
				this.textarea = "";
				this.getList()
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.nav-bar {
	padding: 20px 0 0;
}

.send {
	margin-top: 15px;
	margin-right: 10px;
}

.dialogForm {
	display: flex;
	flex-wrap: wrap;

	.el-form-item {
		width: 50%;
		float: left;

		&.all {
			width: 100%;
		}

		.el-select {
			width: 100%;
		}
	}
}

.user-face {
	display: flex;
	align-items: center;
	position: relative;

	.male,
	.female {
		font-size: 14px;
		position: absolute;
		left: 30px;
		top: 0;
		background-color: #fff;
		height: 16px;
		width: 16px;
		line-height: 16px;
		border-radius: 6px;
	}

	.male {
		color: var(--blue);
	}

	.female {
		color: var(--pink);
	}
}
</style>
